<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Details</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f3f3f3;
        }
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .container h1 {
            color: hotpink;
        }
        .comments {
            margin-top: 20px;
        }
        .comments .comment {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }


        .comments .comment p {
            margin-bottom: 0; /* 让评论内容和时间更紧凑 */
        }
        .comments .comment p:last-child {
            margin-top: 8px; /* 在评论内容和时间之间添加一些间距 */
            color: #999;
            font-size: 0.8em;
        }

        form {
            margin-top: 20px;
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 5px;
        }
        textarea {
            width: 100%;
            min-height: 60px;
            resize: vertical;
        }
        button {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }

        .fixed-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .fixed-button:hover {
            background-color: #0056b3;
        }
    </style>
    <script src="./vue3.js"></script>
    <script src="./axios.js"></script>
</head>
<body>
<div class="container">



    <style>
        .user-nav {
            display: flex;
            align-items: center;
            padding: 1em;
            background-color: #f3f3f3;
        }
        .user-nav span, .user-nav a {
            margin-right: 1em;
            color: #007BFF;
            text-decoration: none;
        }
        .user-nav a:last-child {
            margin-right: 0;
        }
        .user-nav .flex-grow {
            flex-grow: 1;
        }
        .user-nav .home-link {
            margin-right: auto;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination a {
            margin: 0 5px;
            text-decoration: none;
            color: hotpink;
        }
        .pagination span {
            margin: 0 5px;
        }

        /* 被点击时的样式 */
        .paginationok {
            color: #ff0000 !important; /* 设置点击后的链接文字颜色 */
            text-decoration: underline !important; /* 添加下划线 */
        }
    </style>

    <div id="app">
    <div class="user-nav">
        <a class="home-link" href="index.html">回到首页</a>
        <div class="flex-grow"></div>
        <div v-if="loginUser.id == 0">
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
        </div>
        <div v-if="loginUser.id != 0">
            <span>欢迎，{{loginUser.nickname}}</span>
            <a href="javascript:void(0)" @click="logout">退出</a>
        </div>
    </div>
    <hr style="margin-top: 0;">
    <h1>{{event.title}}</h1>
    <p>搜索指数: {{event.searchIndex}}</p>
    <p>创建时间: {{event.createTime}}</p>
    <p>{{event.content}}</p>

    <div class="comments">
        <h2>评论列表</h2>

        <div class="comment" v-for="item in pageinfo.list">
            <p>{{item.content}}</p>
            <p>
                <span>{{item.user?item.user.nickname:'匿名'}}</span>
                {{item.createTime}}
            </p>
        </div>
        <div class="pagination">
            <a href="javascript:void(0)" @click="changePage(1)">首页</a>
            <a href="javascript:void(0)" @click="changePage(commentQuery.pageNum-1)">&laquo; 上一页</a>
            <a href="javascript:void(0)"
               :class="{paginationok:pageNum==commentQuery.pageNum}"
               v-for="pageNum in pageinfo.navigatepageNums"
               @click="changePage(pageNum)">
                {{pageNum}}
            </a>
            <a href="javascript:void(0)" @click="changePage(commentQuery.pageNum+1)">下一页 &raquo;</a>
            <a href="javascript:void(0)" @click="changePage(pageinfo.pages)">末页</a>
            <span>第 {{commentQuery.pageNum}} 页，共 {{pageinfo.pages}} 页</span>
        </div>
    </div>

    <form action="addcommnet" method="post" id="commentForm">
        <h2>添加评论</h2>
        <textarea name="content" required="" v-model="commentAdd.content"></textarea>
        <input type="button" value="提交" @click="addcomment" >
    </form>

</div>
</div>
<!-- Fixed Add Comment Button -->
<button class="fixed-button" onclick="scrollToCommentForm()">Add Comment</button>
<script>
    function scrollToCommentForm() {
        const formElement = document.getElementById('commentForm');
        formElement.scrollIntoView({behavior: "smooth"});
    }
    function getQueryString(name) {
        const URL = new URLSearchParams(window.location.search)
        let val = URL.get(name)
        return val
    }

</script>
<script>
    const {createApp} = Vue
    createApp({
        data(){
            return{
                event:{
                    id:0
                },
                pageinfo:{},
                commentAdd:{
                    content: "",
                    eventId: 0,
                },
                loginUser:{
                    id:0
                },
                commentQuery:{
                    pageNum:1,
                    pageSize:3,
                }
            }
        },
        methods:{
            loadevent(){
                axios.get(`http://127.0.0.1:8088/event/one/${this.event.id}`).then(res => {
                    this.event = res.data.data
                    this.commentAdd.eventId = this.event.id
                })
            },
            loadcomments(){
                axios.get(`http://localhost:8088/comment/list/${this.event.id}?pageNum=${this.commentQuery.pageNum}&pageSize=${this.commentQuery.pageSize}`).then(res => {
                    this.pageinfo = res.data.data
                })
            },
            changePage(page){
                if(page>=1 && page<=this.pageinfo.pages) {
                    this.commentQuery.pageNum = page
                    this.loadcomments(this.event.id)
                }
            },
            addcomment(){
                if(this.loginUser.id == 0){
                    alert('请登录后发评论')
                    return
                }
                let token = sessionStorage.getItem('token');
                console.log(this.commentAdd)
                axios.post('http://127.0.0.1:8088/comment/add',this.commentAdd,{
                    headers: {
                        'token': token?token:''
                    }
                }).then(res => {
                    if(res.data.success) {
                        alert('评论成功');
                        this.loadcomments(this.event.id)
                        this.commentAdd.content = ""
                    }else{
                        alert('评论失败,'+res.data.message)
                    }
                }).catch(reason => {
                     console.log(reason.response)
                    if(reason.response.status == 401){
                        alert("401 token失效")
                    }

                })
            },
            logout(){
                sessionStorage.removeItem('loginUser');
                this.loginUser = {
                    id:0
                }
            }
        },
        created(){
            let id = getQueryString('id')
            this.event.id = id
            this.loadevent()
            this.loadcomments()

            //读取sessionStorage
            let loginUserStr = sessionStorage.getItem('loginUser');
            if (loginUserStr != null) {
                let loginUser = JSON.parse(loginUserStr);
                console.log(loginUser);
                this.loginUser = loginUser
                // this.commentAdd.token = this.loginUser.token
            }else{
                this.loginUser = {
                    id:0
                }
            }
        }
    }).mount("#app")
</script>



</body></html>